<template>
  <div>
    <el-row>
      <el-col :span="12">
        <!--        margin:用于设置DIV的外延边距也就是到父容器的距离。-->
        <div id="bing" style="margin: 100px;width: 500px;height: 700px;float: bottom"></div>
      </el-col>
      <el-col :span="12">
        <div id="zhu" style="width: 500px;height: 800px;float: bottom"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {bing, zhu} from "@/api/moon/channel";

export default {
  name: "echarts",
  //参数
  data() {
    return {
      pName: [],//name值
      pValue: [],//value值
      myChartStyle: {float: "left", width: "100%", height: "400px"} //图表样式
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getList();
      this.list();
    })
  },
  created() {
  },

  methods: {
    getList() {
      bing().then(res => {
        if (res.code == 200) {
          this.myEachars(res.data);
        }
      })
    },
    list() {
      zhu().then(res => {
        console.log(res)
        if (res.code == 200) {
          this.zhuzhuangtu(res.data);
        } else {
          //验证失败
          this.zhuzhuangtu(null);
        }
      })
    },
    zhuzhuangtu(datms) {

      //参数拼接
      var datas = []
      var xData = []
      if (datms == null) {
        datas.push(0, 0);
        xData.push("PC", "wechat");
      } else {
        for (let i = 0; i < datms.length; i++) {
          var item = {
            value: datms[i].value,
          };
          var items = {
            value: datms[i].name,
          };
          datas.push(item);
          xData.push(items);
        }
      }

      // 基本柱状图
      const option = {
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: datas
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("zhu"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    //饼图
    myEachars(datm) {
      //数据
      var datas = []
      for (let i = 0; i < datm.length; i++) {
        var item = {
          value: datm[i].value,
          name: datm[i].name,
        };
        datas.push(item);
      }
      console.log(datas);
      // 基于准备好的dom，初始化echarts实例
      var bing = echarts.init(document.getElementById('bing'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '渠道统计',
        },
        legend: {
          top: 'bottom',
          show: true,
        },
        tooltip: {//鼠标移至有数据
          trigger: 'item'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [//将饼状图的折线部分换成百分比格式
          {
            name: '渠道饼状图',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal: {
                label: {
                  show: true,
                  position: 'inside', // 在饼图内部显示标签
                  formatter: '{b} 人数：{c}'
                }
              }
            },
            data: datas//将数据赋值给date
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      bing.setOption(option);
    },
  }


}
</script>

